<template>
  <div>
    <div class="form-container">
      <el-form
        :inline="true"
        label-suffix="："
        :label-width="'100px'"
        :size="'small'"
        ref="form"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="结算对象名称" label-width="100px">
              <el-select
                v-model="query.entId"
                placeholder="请选择结算对象"
                style="width: 100%"
                clearable
                filterable
                remote
                :remote-method="getBusDetail"
                :loading="settlementLoading"
              >
                <el-option
                  v-for="item in settlementList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                  <span style="float: left">{{ item.label }}</span>
                  <span style="float: right">{{ item.entFullname }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="业务编号">
              <el-input
                v-model="query.doccode"
                clearable
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="提单号">
              <el-input
                v-model="query.blNo"
                clearable
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item label="业务员">
              <el-select
                v-model="query.salesId"
                placeholder="请选择业务员"
                style="width: 100%"
                clearable
                filterable
                remote
                :remote-method="getSalesman"
                :loading="salesmanLoading"
              >
                <el-option
                  v-for="item in salesman"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="6">
            <el-form-item label="币种">
              <el-select
                v-model="query.currency"
                placeholder="请选择币种"
                style="width: 100%"
                clearable
                filterable
                remote
                :remote-method="getCurrentData"
                :loading="currentLoading"
              >
                <el-option
                  v-for="item in current"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                  <span style="float: left"> {{ item.label }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="审核状态">
              <el-select
                v-model="query.checkStatus"
                placeholder="请选择审核状态"
                style="width: 100%"
                filterable
                :disabled="true"
              >
                <el-option
                  v-for="item in aduitStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="核销状态">
              <el-select
                v-model="query.feeStatus"
                placeholder=" "
                style="width: 100%"
                filterable
              >
                <el-option label="全部" :value="-2"> </el-option>
                <el-option label="已核销" :value="1"> </el-option>
                <el-option label="未核销" :value="0"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否对冲">
              <el-checkbox v-model="hasIncome" size="small" />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="flex-container">
          <!-- <el-button
            type="primary"
            @click="state.hidden = !state.hidden"
            size="small"
            style="padding: 8px 15px"
          >
            <div class="flex-container">
              <el-icon style="transform: rotate(90deg)">
                <MoreFilled />
              </el-icon>
              {{ hidden ? "折叠" : "更多条件" }}
            </div>
          </el-button> -->
          <el-button type="primary" icon="search" @click="getList" size="small">
            搜索
          </el-button>
          <el-button type="info" icon="refresh" @click="reset" size="small">
            重置
          </el-button>
        </div>
      </el-form>
    </div>
    <div style="margin-top: 8px">
      <div class="btn-box">
        <el-button type="default" icon="RefreshRight" @click="getList">
        </el-button>
        <el-button
          type="primary"
          icon="EditPen"
          @click="modifyInvioce"
          v-if="DocType == 1"
        >
          新增对账单
        </el-button>
        <el-button
          type="primary"
          icon="EditPen"
          @click="modifyInvioce"
          v-if="DocType == 0"
        >
          新增对账单
        </el-button>
      </div>
      <!-- :autostyle="'height:calc(100% - 80px)'" @update:option="upDataOption"-->
      <AppPageTable
        stripe
        :data="tableData.data"
        @change="getList"
        :height="500"
        :option="tableData.option"
        v-loading="tableLoading"
      >
        <el-table-column
          type="selection"
          width="40"
          align="center"
          fixed="left"
        />
        <el-table-column
          prop="doccode"
          width="200"
          align="center"
          label="业务编号"
          showOverflowTooltip
        >
          <template #default="scope">
            <span class="doccode-text" @click="toEditPage(scope.row)">{{
              scope.row.doccode
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="blNo"
          width="200"
          align="center"
          label="提单号"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column
          prop="recDate"
          width="100"
          align="center"
          label="接单日期"
          showOverflowTooltip
        >
          <template #default="scope">
            {{
              scope.row.recDate
                ? $utils.formatDateTime(scope.row.recDate, 'YYYY-MM-DD')
                : ''
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="etd"
          width="100"
          align="center"
          label="开航日期"
          showOverflowTooltip
        >
          <template #default="scope">
            {{
              scope.row.etd
                ? $utils.formatDateTime(scope.row.etd, 'YYYY-MM-DD')
                : ''
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="packTime"
          width="100"
          align="center"
          label="装箱日期"
          showOverflowTooltip
        >
          <template #default="scope">
            {{
              scope.row.packTime
                ? $utils.formatDateTime(scope.row.packTime, 'YYYY-MM-DD')
                : ''
            }}
          </template>
        </el-table-column>
        <!-- <el-table-column
                    prop="vessel"
                    align="center"
                    label="船名"
                    showOverflowTooltip
                    width="100"
                >
                </el-table-column> -->
        <el-table-column
          prop="vessel"
          align="center"
          label="船名"
          width="100"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column
          prop="voyage"
          align="center"
          label="航次"
          width="100"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column
          prop="portDepartureName"
          align="center"
          label="起运港"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column
          prop="portDestinationName"
          align="center"
          label="目的港"
          showOverflowTooltip
        >
        </el-table-column>
        <!-- <el-table-column
                    prop="shipCompanyName"
                    label="船公司"
                    align="center"
                    width="200"
                    showOverflowTooltip
                >
                </el-table-column> -->
        <el-table-column
          prop="entFullname"
          label="结算对象名称"
          align="center"
          width="200"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column
          label="收/付"
          align="center"
          width="100"
          showOverflowTooltip
        >
          <template #default="scope">
            {{ scope.row.isIncome == 1 ? '收款' : '付款' }}
          </template>
        </el-table-column>
        <el-table-column label="费用名称" align="center" width="100">
          <template #default="scope">
            {{ scope.row.feeName }}
          </template>
        </el-table-column>
        <el-table-column
          prop="currency"
          label="币种"
          align="center"
          width="100"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column
          prop="totalmoney"
          label="金额"
          align="center"
          width="100"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column
          prop="verificationMoney"
          label="已销金额"
          align="center"
          width="100"
          showOverflowTooltip
        >
          <template #default="scope">
            {{ scope.row.verificationMoney ? scope.row.verificationMoney : 0 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="getUnVerificationMoney"
          label="未销金额"
          align="center"
          width="100"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column
          prop="natMoney"
          width="100"
          align="center"
          label="折人民币"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column
          label="审核"
          align="center"
          width="100"
          showOverflowTooltip
        >
          <template #default="scope">
            {{ scope.row.checkStatus == 1 ? '已审' : '未审' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="checkName"
          width="100"
          align="center"
          label="审核人"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column
          prop="checkTime"
          width="100"
          align="center"
          label="审核日期"
          showOverflowTooltip
        >
          <template #default="scope">
            {{
              scope.row.checkTime
                ? $utils.formatDateTime(
                    scope.row.checkTime,
                    'YYYY-MM-DD HH:mm:ss'
                  )
                : ''
            }}
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="invoiceCode"
          label="发票号"
          align="center"
          width="100"
          showOverflowTooltip
        >
        </el-table-column>
        <el-table-column
          label="开票日期"
          align="center"
          width="100"
          showOverflowTooltip
        >
          <template #default="scope">
            {{
              scope.row.invoiceDate
                ? $utils.formatDateTime(scope.row.invoiceDate, 'YYYY-MM-DD')
                : ''
            }}
          </template>
        </el-table-column> -->
        <el-table-column
          prop="memo"
          align="center"
          label="备注"
          showOverflowTooltip
        >
        </el-table-column>
      </AppPageTable>
      <!-- 显示当前列表应收应付合计 -->
      <!-- <div class="statistical-results">
                <el-row v-if="DocType == 1">
                    <el-col :span="8">
                        <div class="statistical-tip"></div>
                        <div class="statistical-label">合计</div>
                        <el-row :gutter="12">
                            <el-col :span="4">
                                <div class="statistical-text" style="color: #000000a6">应收</div>
                            </el-col>
                            <el-col
                                :span="6"
                                v-for="(item, index) in resultStatistical.amount._in"
                                :key="index">
                                <div class="statistical-text" v-if="tableData.data.length">
                                    {{ item.currency }}&nbsp;{{ item.money }}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="4">
                                <div class="statistical-text" style="color: #000000a6">-应付</div>
                            </el-col>
                            <el-col
                                :span="6"
                                v-for="(item, index) in resultStatistical.amount._out"
                                :key="index">
                                <div class="statistical-text" v-if="tableData.data.length">
                                    {{ item.currency }}&nbsp;{{ item.money }}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="4">
                                <div class="statistical-text" style="color: #000000a6">=合计</div>
                            </el-col>
                            <el-col
                                :span="6"
                                v-for="(item, index) in resultStatistical.amount._profit"
                                :key="index">
                                <div class="statistical-text" v-if="tableData.data.length">
                                    {{ item.currency }}&nbsp;{{ item.money }}
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="8">
                        <div class="statistical-tip"></div>
                        <div class="statistical-label">已核对</div>
                        <el-row :gutter="12">
                            <el-col :span="4">
                                <div class="statistical-text" style="color: #000000a6">应收</div>
                            </el-col>
                            <el-col
                                :span="6"
                                v-for="(item, index) in resultStatistical.checked._in"
                                :key="index">
                                <div class="statistical-text" v-if="tableData.data.length">
                                    {{ item.currency }}&nbsp;{{ item.money }}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="4">
                                <div class="statistical-text" style="color: #000000a6">-应付</div>
                            </el-col>
                            <el-col
                                :span="6"
                                v-for="(item, index) in resultStatistical.checked._out"
                                :key="index">
                                <div class="statistical-text" v-if="tableData.data.length">
                                    {{ item.currency }}&nbsp;{{ item.money }}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="4">
                                <div class="statistical-text" style="color: #000000a6">=合计</div>
                            </el-col>
                            <el-col
                                :span="6"
                                v-for="(item, index) in resultStatistical.checked._profit"
                                :key="index">
                                <div class="statistical-text" v-if="tableData.data.length">
                                    {{ item.currency }}&nbsp;{{ item.money }}
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="8">
                        <div class="statistical-tip"></div>
                        <div class="statistical-label">选中</div>
                        <el-row :gutter="12">
                            <el-col :span="4">
                                <div class="statistical-text" style="color: #000000a6">应收</div>
                            </el-col>
                            <el-col
                                :span="6"
                                v-for="(item, index) in resultStatistical.selected._in"
                                :key="index">
                                <div
                                    class="statistical-text"
                                    v-if="tableData.option.selected.length">
                                    {{ item.currency }}&nbsp;{{ item.money }}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="4">
                                <div class="statistical-text" style="color: #000000a6">-应付</div>
                            </el-col>
                            <el-col
                                :span="6"
                                v-for="(item, index) in resultStatistical.selected._out"
                                :key="index">
                                <div
                                    class="statistical-text"
                                    v-if="tableData.option.selected.length">
                                    {{ item.currency }}&nbsp;{{ item.money }}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="4">
                                <div class="statistical-text" style="color: #000000a6">=合计</div>
                            </el-col>
                            <el-col
                                :span="6"
                                v-for="(item, index) in resultStatistical.selected._profit"
                                :key="index">
                                <div
                                    class="statistical-text"
                                    v-if="tableData.option.selected.length">
                                    {{ item.currency }}&nbsp;{{ item.money }}
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row v-if="DocType == 0">
                    <el-col :span="8">
                        <div class="statistical-tip"></div>
                        <div class="statistical-label">合计</div>
                        <el-row :gutter="12">
                            <el-col :span="4">
                                <div class="statistical-text" style="color: #000000a6">应付</div>
                            </el-col>
                            <el-col
                                :span="6"
                                v-for="(item, index) in resultStatistical.amount._out"
                                :key="index">
                                <div class="statistical-text" v-if="tableData.data.length">
                                    {{ item.currency }}&nbsp;{{ item.money }}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="4">
                                <div class="statistical-text" style="color: #000000a6">-应收</div>
                            </el-col>
                            <el-col
                                :span="6"
                                v-for="(item, index) in resultStatistical.amount._in"
                                :key="index">
                                <div class="statistical-text" v-if="tableData.data.length">
                                    {{ item.currency }}&nbsp;{{ item.money }}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="4">
                                <div class="statistical-text" style="color: #000000a6">=合计</div>
                            </el-col>
                            <el-col
                                :span="6"
                                v-for="(item, index) in resultStatistical.amount._profit"
                                :key="index">
                                <div class="statistical-text" v-if="tableData.data.length">
                                    {{ item.currency }}&nbsp;{{ item.money }}
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="8">
                        <div class="statistical-tip"></div>
                        <div class="statistical-label">已核对</div>
                        <el-row :gutter="12">
                            <el-col :span="4">
                                <div class="statistical-text" style="color: #000000a6">应付</div>
                            </el-col>
                            <el-col
                                :span="6"
                                v-for="(item, index) in resultStatistical.checked._out"
                                :key="index">
                                <div class="statistical-text" v-if="tableData.data.length">
                                    {{ item.currency }}&nbsp;{{ item.money }}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="4">
                                <div class="statistical-text" style="color: #000000a6">-应收</div>
                            </el-col>
                            <el-col
                                :span="6"
                                v-for="(item, index) in resultStatistical.checked._in"
                                :key="index">
                                <div class="statistical-text" v-if="tableData.data.length">
                                    {{ item.currency }}&nbsp;{{ item.money }}
                                </div>
                            </el-col>
                        </el-row>

                        <el-row :gutter="12">
                            <el-col :span="4">
                                <div class="statistical-text" style="color: #000000a6">=合计</div>
                            </el-col>
                            <el-col
                                :span="6"
                                v-for="(item, index) in resultStatistical.checked._profit"
                                :key="index">
                                <div class="statistical-text" v-if="tableData.data.length">
                                    {{ item.currency }}&nbsp;{{ item.money }}
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="8">
                        <div class="statistical-tip"></div>
                        <div class="statistical-label">选中</div>
                        <el-row :gutter="12">
                            <el-col :span="4">
                                <div class="statistical-text" style="color: #000000a6">应付</div>
                            </el-col>
                            <el-col
                                :span="6"
                                v-for="(item, index) in resultStatistical.selected._out"
                                :key="index">
                                <div
                                    class="statistical-text"
                                    v-if="tableData.option.selected.length">
                                    {{ item.currency }}&nbsp;{{ item.money }}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="4">
                                <div class="statistical-text" style="color: #000000a6">-应收</div>
                            </el-col>
                            <el-col
                                :span="6"
                                v-for="(item, index) in resultStatistical.selected._in"
                                :key="index">
                                <div
                                    class="statistical-text"
                                    v-if="tableData.option.selected.length">
                                    {{ item.currency }}&nbsp;{{ item.money }}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="4">
                                <div class="statistical-text" style="color: #000000a6">=合计</div>
                            </el-col>
                            <el-col
                                :span="6"
                                v-for="(item, index) in resultStatistical.selected._profit"
                                :key="index">
                                <div
                                    class="statistical-text"
                                    v-if="tableData.option.selected.length">
                                    {{ item.currency }}&nbsp;{{ item.money }}
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </div> -->
      <AccountStatement
        ref="accountStatementRef"
        :DocType="DocType"
        :hasAccount="false"
        @getList="getList"
      ></AccountStatement>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import AppPageTable, { useTableOption } from '@/components/AppPageTable2'
import request from '@/public/request'
import dayjs from 'dayjs'
import { MoreFilled } from '@element-plus/icons'
import AccountStatement from './AccountStatement.vue'
export default defineComponent({
  components: {
    AppPageTable,
    MoreFilled,
    AccountStatement
  },
  props: {
    DocType: {
      type: Number,
      default: ''
    }
  },
  data() {
    return {
      // 查询条件
      query: {
        doccode: '', //业务编号
        entId: '', //结算对象名称
        // invoiceCode: '', //发票号
        blNo: '', //提单号
        // salesId: '', //业务员
        checkStatus: 1, //审核状态
        currency: '', //币种
        // custDocNo: '', //客户单号
        // feeCode: '', //费用类型
        // ctn_no: '', //箱封号
        // invoiceStatus: -2, //开票状态 0 未开票 1 已开票
        // StartEtd: "",//起始开航日,
        // EndEtd: "",//截止开航日
        // StartPackTime: "",//开始装箱日
        // EndPackTime: "",//结束装箱日
        // StartRecTime: "",//起始接单日
        // EndRecTime: "",//结束接单日
        // StartInvoiceTime: "",//起始开票日
        // EndInvoiceTime: "",//结束开票日
        // StartCheckTime: "",//起始审核日
        // EndCheckTime: "", //结束审核日
        isIncome: this.DocType, // 1:应收 0:应付
        // etd: [], //开航日期
        // packTime: [], //装箱日期
        // recDate: [], //接单日期
        // invoiceDate: [], //开票日期
        // checkTime: [], //审核日期
        feeStatus: -2 //核销状态 0 未核销 1 已核销
      },
      // 是否对冲
      hasIncome: false,
      //表格数据
      tableData: {
        data: [],
        option: useTableOption()
      },
      tableLoading: false,
      // 展开
      hidden: false,
      // 结算对象的数据
      settlementList: [],
      settlementLoading: false,
      // 币种
      current: [],
      currentLoading: false,
      // 业务员
      salesman: [],
      salesmanLoading: false,
      // 核销状态
      WriteOffStatus: [
        {
          label: '全部',
          value: -2
        },
        {
          label: '未核销',
          value: 0
        },
        {
          label: '已核销',
          value: 1
        }
      ],
      // 审核状态
      aduitStatus: [
        {
          label: '全部',
          value: -2
        },
        {
          label: '未审核',
          value: 0
        },
        {
          label: '已审核',
          value: 1
        }
      ],
      //费用类型
      feenameList: [],
      feenameLoading: false,
      // 币种数组
      curList: [],
      // 统计计算
      resultStatistical: {
        // 合计
        amount: {
          _in: [],
          _out: [],
          _profit: []
        },
        // 已核对
        checked: {
          _in: [],
          _out: [],
          _profit: []
        },
        //选中
        selected: {
          _in: [],
          _out: [],
          _profit: []
        }
      }
    }
  },
  computed: {
    // 开航日
    // sailTime: {
    //     get: function () {
    //         return [this.query.StartEtd, this.query.EndEtd];
    //     },
    //     set: function (val) {
    //         if (val) {
    //             this.query.StartEtd = val[0];
    //             this.query.EndEtd = val[1];
    //         } else {
    //             this.query.StartEtd = "";
    //             this.query.EndEtd = "";
    //         };
    //     },
    // },
    // // 装箱日期
    // packingTime: {
    //     get: function () {
    //         return [this.query.StartPackTime, this.query.EndPackTime];
    //     },
    //     set: function (val) {
    //         if (val) {
    //             this.query.StartPackTime = val[0];
    //             this.query.EndPackTime = val[1];
    //         } else {
    //             this.query.StartPackTime = "";
    //             this.query.EndPackTime = "";
    //         };
    //     },
    // },
    // // 接单日期
    // recDateTime: {
    //     get: function () {
    //         return [this.query.StartRecTime, this.query.EndRecTime];
    //     },
    //     set: function (val) {
    //         if (val) {
    //             this.query.StartRecTime = val[0];
    //             this.query.EndRecTime = val[1];
    //         } else {
    //             this.query.StartRecTime = "";
    //             this.query.EndRecTime = "";
    //         };
    //     },
    // },
    // // 开票日期
    // invoiceDateTime: {
    //     get: function () {
    //         return [this.query.StartInvoiceTime, this.query.EndInvoiceTime];
    //     },
    //     set: function (val) {
    //         if (val) {
    //             this.query.StartInvoiceTime = val[0];
    //             this.query.EndInvoiceTime = val[1];
    //         } else {
    //             this.query.StartInvoiceTime = "";
    //             this.query.EndInvoiceTime = "";
    //         };
    //     },
    // },
    // // 审核日期
    // checkDateTime: {
    //     get: function () {
    //         return [this.query.StartCheckTime, this.query.EndCheckTime];
    //     },
    //     set: function (val) {
    //         if (val) {
    //             this.query.StartCheckTime = val[0];
    //             this.query.EndCheckTime = val[1];
    //         } else {
    //             this.query.StartCheckTime = "";
    //             this.query.EndCheckTime = "";
    //         };
    //     },
    // },
  },
  methods: {
    // 获取币种类型
    async getCurrentData(val) {
      this.currentLoading = true
      let res = await this.$http.get('/api/base/currency/dropdownlist', {
        keywords: val
      })
      this.current = res.map((item) => {
        return {
          label: item.currencyCode + '|' + item.currencyName,
          value: item.currencyCode
        }
      })
      this.currentLoading = false
    },

    // 跳转业务详情页面
    toEditPage(row) {
      this.$router.openTab({
        path: '/business/docDetail',
        query: {
          id: row.docId,
          title: `业务详情${row.doccode}`,
          iscopy: false
        }
      })
    },

    // 获取列表数据
    async getList() {
      let search = {
        PageIndex: this.tableData.option.page,
        PageSize: this.tableData.option.pageSize,
        ...JSON.parse(JSON.stringify(this.query))
      }
      if (this.hasIncome) {
        delete search.isIncome
      }
      let queryKeysList = Object.keys(this.query)
      for (const iterator of queryKeysList) {
        // if (this.query[iterator] instanceof Array) {
        //   if (this.query[iterator].length === 0) {
        //     delete search[iterator]
        //   }
        // } else {
        if (this.query[iterator] === -2) {
          search[iterator] = ''
        }
        // }
      }
      this.tableLoading = true
      let res = await this.$http.get('/api/docbalance/getBalanceNoList', search)
      // let outCountKeysList = Object.keys(res.statInfo)
      // for (const iterator of outCountKeysList) {
      //     if (iterator == 'total') {
      //         this.resultStatistical.amount = res.statInfo[iterator]
      //         this.addMinus(this.resultStatistical.amount)
      //     } else if (iterator == 'verification') {
      //         this.resultStatistical.checked = res.statInfo[iterator]
      //         this.addMinus(this.resultStatistical.checked)
      //     }
      //     this.statisticCurResult(res.statInfo[iterator]._in)
      // }
      this.tableData.data = res.content
      this.tableData.option.total = res.totalElements
      this.tableLoading = false
    },

    // 应付页面合计数据加一个负号
    addMinus(resList) {
      if (this.DocType == 0) {
        resList._profit.forEach((item) => {
          item.money = item.money * -1
        })
      }
    },

    // 统计个币种的计算结果
    statisticCurResult(list) {
      for (const iterator of list) {
        if (this.curList.indexOf(iterator.currency) === -1) {
          this.curList.push(iterator.currency)
        }
      }
    },

    // 复选框变动
    upDataOption(inOption) {
      let selected = this.tableData.option.selected
      this.resultStatistical.selected = {
        _in: [],
        _out: [],
        _profit: []
      }
      for (const iterator of this.curList) {
        let curObj = {
          currency: iterator,
          money: 0
        }
        this.resultStatistical.selected._in.push(
          JSON.parse(JSON.stringify(curObj))
        )
        this.resultStatistical.selected._out.push(
          JSON.parse(JSON.stringify(curObj))
        )
        this.resultStatistical.selected._profit.push(
          JSON.parse(JSON.stringify(curObj))
        )
      }
      for (const item of selected) {
        if (this.curList.indexOf(item.currency) != -1) {
          if (item.isIncome == 1) {
            this.addCurCount(
              item.getTotalmoney,
              item.currency,
              this.resultStatistical.selected._in
            )
          } else if (item.isIncome == 0) {
            this.addCurCount(
              item.getTotalmoney,
              item.currency,
              this.resultStatistical.selected._out
            )
          }
        }
      }

      // 计算各币种对应的合计
      for (const iterator of this.resultStatistical.selected._profit) {
        let index = this.curList.indexOf(iterator.currency)
        let _in = this.resultStatistical.selected._in
        let _out = this.resultStatistical.selected._out
        let _profit = this.resultStatistical.selected._profit
        if (this.DocType == 1) {
          _profit[index].money = _in[index].money - _out[index].money
        } else {
          _profit[index].money = _out[index].money - _in[index].money
        }
      }
    },

    addCurCount(curMoney, cur, list) {
      for (const iterator of list) {
        if (iterator.currency == cur) {
          iterator.money += curMoney
        }
      }
    },

    // 重置
    reset() {
      this.query = {
        doccode: '', //业务编号
        entId: '', //结算对象名称
        // invoiceCode: '', //发票号
        blNo: '', //提单号
        // salesId: '', //业务员
        checkStatus: 1, //审核状态
        currency: '', //币种
        // custDocNo: '', //客户单号
        // feeCode: '', //费用类型
        // ctn_no: '', //箱封号
        // invoiceStatus: -2, //开票状态 0 未开票 1 已开票
        // StartEtd: "",//起始开航日,
        // EndEtd: "",//截止开航日
        // StartPackTime: "",//开始装箱日
        // EndPackTime: "",//结束装箱日
        // StartRecTime: "",//起始接单日
        // EndRecTime: "",//结束接单日
        // StartInvoiceTime: "",//起始开票日
        // EndInvoiceTime: "",//结束开票日
        // StartCheckTime: "",//起始审核日
        // EndCheckTime: "", //结束审核日
        isIncome: this.DocType, // 1:应收 0:应付
        // etd: [], //开航日期
        // packTime: [], //装箱日期
        // recDate: [], //接单日期
        // invoiceDate: [], //开票日期
        // checkTime: [], //审核日期
        feeStatus: -2 //核销状态 0 未核销 1 已核销
      }
      this.hasIncome = false
      this.getList()
    },

    // 批量审核和取消
    async batchAduit(val) {
      if (!this.tableData.option.selected.length) {
        this.$message.warning('请选择数据')
        return
      }
      let req = {
        ids: [],
        checkStatus: val
      }
      for (const iterator of this.tableData.option.selected) {
        req.ids.push(iterator.id)
      }
      let res = await this.$http.post('/api/docbalance/createBalance', req)
      if (res.status) {
        this.getList()
        this.$message.success('成功')
      } else {
        this.$message.warning(res.message)
      }
    },
    // 新增对账单
    async modifyInvioce() {
      if (this.tableData.option.selected.length < 1) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      let selectedValue = this.tableData.option.selected
      // 结算对算名称和币种是否一致
      let settlementArray = []
      let currencyArray = []
      selectedValue.forEach((t) => {
        if (!settlementArray.find((item) => t.entId == item.entId)) {
          settlementArray.push(t)
        }
        if (!currencyArray.find((item) => t.currency == item.currency)) {
          currencyArray.push(t)
        }
      })
      if (settlementArray.length != 1 || currencyArray.length != 1) {
        this.$message.warning('当前选择的数据存在不同的结算对象和币种')
        return
      }
      this.$refs.accountStatementRef.openDialog(selectedValue)
    },

    // 获取结算对象的数据
    async getBusDetail(val) {
      this.settlementLoading = true
      let res = await this.$http.get('/api/buenterprise/dropdownlist', {
        KeyWords: val
      })
      res.forEach((item) => {
        item.label = item.entCode
        item.value = item.id
      })
      this.settlementList = res
      this.settlementLoading = false
    },

    // 获取业务员
    async getSalesman(val) {
      this.salesmanLoading = true
      let res = await this.$http.get('/api/user/userList', {
        keyword: val
      })
      res.forEach((item) => {
        item.label = item.nickName
        item.value = item.id
      })
      this.salesman = res
      this.salesmanLoading = false
    },

    // 获取费用类型
    async getFeeType(val) {
      this.feenameLoading = true
      let res = await this.$http.get('/api/base/feetype/query', {
        KeyWords: val
      })
      res.content.forEach((item) => {
        item.label = item.feeName
        item.value = item.feeName
      })
      this.feenameList = res.content
      this.feenameLoading = false
    }
  },
  watch: {},

  created() {
    this.getCurrentData()
    this.getList()
  }
})
</script>

<style lang="scss" scoped>
.form-container {
  border: 1px solid #e8e8e8;
  padding: 6px 6px 6px 8px;
  background-color: #ffffff;

  :deep(.el-form-item--small .el-form-item__label) {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.85);
  }

  :deep(.el-input--suffix .el-input__inner) {
    padding-right: 4px;
  }

  :deep(.el-form--inline .el-form-item) {
    display: flex;
    margin-right: 0;
  }

  :deep(.el-form-item--small.el-form-item) {
    margin-bottom: 8px;
  }
}

.btn-box {
  margin-bottom: 8px;
}

.flex-container {
  display: flex;
}

.doccode-text {
  color: rgb(24, 144, 255);
  cursor: pointer;
}

// .button-container {
//     display: flex;
//     justify-content: flex-end;
//     align-items: center;
// }

.statistical-results {
  padding-left: 20px;
  padding-right: 20px;

  .statistical-tip {
    display: inline-block;
    background: #2867c9;
    width: 4px;
    height: 20px;
    vertical-align: middle;
    margin-left: -20px;
  }

  .statistical-label {
    margin: 0 16px;
    display: inline-block;
    font-weight: 600;
    color: #000000a6;
  }

  .statistical-text {
    color: red;
    font-size: 12px;
    line-height: 18px;
  }
}

.doccode-text {
  color: rgb(24, 144, 255);
  cursor: pointer;
}
</style>
